<template>
  <div ref="echartRef" id="main" style="width: 1000px;height:700px;"></div>
</template>

<script>
// 引入echart
  import echarts from 'echarts';

// loadsh
  import _ from 'lodash';

// 请求
  import { reportData } from '@/network/reportRequest';
  

export default {
  data() {
    return {
      options: { // 合并的options数据
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },
  methods: {
    async creatEchart() { // 创建echart可视化图形
      
      const myChart = echarts.init(this.$refs['echartRef']);
      
      const data = await this.getOptionRequest();
      const resOption = _.merge(data, this.options);
      console.log(resOption);
        // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(resOption);
    },
    async getOptionRequest() { // 网络请求获取option数据
      const {meta, data} = await reportData();
      // console.log(meta, data);
      if(meta.status !== 200) {
        console.log(meta);
        return this.$message.error(meta.msg);
      }

      // 获取成功
      return data;
    }
  },
  mounted() {
    this.creatEchart(); // 创建echart图形界面
  }
}
</script>

<style lang="scss" scoped>

</style>